<template>
  <k-view>
    <k-view class="__kf_confirm_mask" style="animation-name: __kf_confirm_fadeIn"></k-view>
    <k-view class="__kf_confirm" style="animation-name: __kf_confirm_in">
      <k-view class="__kf_confirm_title">{{ title }}</k-view>
      <k-view class="__kf_confirm_sub_title" v-if="subTitle"><k-view class="line" /><k-text class="sub-title-content">{{
        dealedSubTitle }}</k-text><k-view class="line" /></k-view>
      <k-view class="__kf_confirm_content">{{ content }}
        <slot />
      </k-view>
      <k-view v-if="hideCancel" class="__kf_confirm_btns">
        <k-view class="__kf_confirm_confirm" tabindex="-1" style="width: 100%; color: #e93030"
          @click="$emit('success')">{{ confirmText }}</k-view>
      </k-view>
      <k-view v-else class="__kf_confirm_btns">
        <k-view class="__kf_confirm_cancel" tabindex="-1" @click="$emit('fail')">{{
          cancelText
        }}</k-view>
        <k-view class="__kf_confirm_confirm" tabindex="-1" @click="$emit('success')">{{
          confirmText
        }}</k-view>
      </k-view>
    </k-view>
  </k-view>
</template>

<script>
export default {
  props: {
    title: String,
    subTitle: {
      type: String,
      default: ''
    },
    content: String,
    confirmText: {
      type: String,
      default: '确定',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    hideCancel: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dealedSubTitle() {
      const maxLen = 10;
      return this.subTitle.length > maxLen ? `${this.subTitle.slice(0, maxLen)}...` : this.subTitle
    }
  },
};
</script>
<style lang="less">
.__kf_confirm {
  position: fixed;
  left: 50%;
  top: 50%;
  max-height: 90vh;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ffffff;
  color: #323232;
  box-sizing: border-box;
  border-radius: 8px;
  z-index: 9999;
  outline: none;
  text-align: center;
  width: 560px;
  opacity: 0;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.__kf_confirm_btns {
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
  border-top: 2px solid #dddddd;
}

.__kf_confirm_mask {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  display: block;
  z-index: 9999;
  background: #000;
  opacity: 0;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.__kf_confirm_title {
  padding: 32px 40px 16px 40px;
  color: #262626;
  letter-spacing: 0;
  text-align: center;
  font-size: 36px;
  font-weight: 500;
}

.__kf_confirm_sub_title {
  display: flex;
  justify-content: center;
  align-items: center;

  .sub-title-content {
    margin-left: 16px;
    margin-right: 16px;
    color: #B3B3B3;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
  }

  .line {
    width: 76px;
    height: 1px;
    background-color: #D8D8D8;
  }
}

.__kf_confirm_content {
  color: #595959;
  padding: 0 40px;
  margin-bottom: 32px;
  letter-spacing: 0;
  text-align: justify;
  word-break: break-all;
  max-height: 400px;
  font-size: 28px;
  overflow: auto;
  font-weight: 400;
}

.__kf_confirm_cancel,
.__kf_confirm_confirm {
  display: inline-block;
  padding: 23px 0;
  width: 50%;
  font-size: 36px;
  height: 100%;
  align-self: center;
  /* line-height: 44px; */
  box-sizing: border-box;
}

.__kf_confirm_cancel {
  color: #e93030;
  border-right: 2px solid #dddddd;
}

.__kf_confirm_confirm {
  color: #323232;
}

@keyframes __kf_confirm_in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes __kf_confirm_out {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes __kf_confirm_fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.6;
  }
}

@keyframes __kf_confirm_fadeOut {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
  }
}

[theme-mode='black'] {
  .__kf_confirm {
    background: #1c1c1c;
  }

  .__kf_confirm_title {
    color: rgba(255, 255, 255, 0.84);
  }

  .__kf_confirm_content {
    color: rgba(255, 255, 255, 0.6);
  }

  .__kf_confirm_btns {
    border-top-color: rgba(255, 255, 255, 0.06);
  }
}
</style>
